﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="HealthReports.aspx.cs" Inherits="HealthReports" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
      <style>
         /* 容器样式 */
        .profile-container {
            width: 90%;
            margin: 20px auto;
            padding: 20px;
            background-color: #f4f6fa;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        /* 标题样式 */
        .profile-title {
            font-size: 24px;
            color: #5a3e85;
            font-weight: bold;
            margin-bottom: 20px;
            text-align: center;
        }

        /* 筛选器区域样式 */
        .filter-section {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
        }

        /* 筛选输入框和按钮 */
        .filter-section label {
            font-weight: bold;
            color: #5a3e85;
        }

        .filter-section input[type="date"],
        .filter-section .filter-btn {
            padding: 8px 10px;
            border: 1px solid #ccc;
            border-radius: 6px;
            font-size: 14px;
        }

        .filter-section .filter-btn {
            background-color: #5a3e85;
            color: #fff;
            cursor: pointer;
            transition: background-color 0.3s;
            font-weight: bold;
            border-radius: 6px;
            margin-left: 10px;
        }

        .filter-section .filter-btn:hover {
            background-color: #4a326e;
        }

        /* 表格样式 */
        .custom-gridview {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0 10px; /* 增加行间距 */
            background-color: #fff;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            border-radius: 12px;
        }

        .custom-gridview th {
            background: linear-gradient(90deg, #7e57c2, #5a3e85);
            color: white;
            padding: 14px;
            font-size: 16px;
            font-weight: bold;
            border: none;
            border-radius: 8px 8px 0 0;
            text-align: center;
        }

        .custom-gridview td {
            padding: 12px;
            text-align: center;
            font-size: 14px;
            color: #555;
            background-color: #fafafa;
            border: none;
            border-radius: 6px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        /* 偶数行的不同背景色 */
        .custom-gridview tr:nth-child(even) td {
            background-color: #f1f1f1;
        }

        /* 行悬停效果 */
        .custom-gridview tr:hover td {
            background-color: #e8e4f5;
            color: #5a3e85;
            font-weight: bold;
            transition: background-color 0.3s ease;
        }
    /* 按钮容器 */
.button-container {
    display: flex;
    justify-content: space-between; /* 按钮分布到两侧 */
    align-items: center;
    margin-top: 20px; /* 调整顶部间距 */
    padding: 0 20px; /* 增加左右内边距 */
}

/* 按钮样式 */
.button-styled {
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    background: linear-gradient(90deg, #6a11cb, #2575fc);
    border: none;
    border-radius: 25px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

.button-styled:hover {
    background: linear-gradient(90deg, #2575fc, #6a11cb);
    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.button-styled:active {
    transform: translateY(2px);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
.button-container {
    justify-content: space-around; /* 按钮分布到两边 */
    padding: 0 50px; /* 两侧按钮更靠近边缘 */
}


      </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
       <div class="profile-container">
        <h2 class="profile-title">健康数据展示</h2>

        <!-- 时间筛选器 -->
        <div class="filter-section">
            <label>开始日期:</label>
            <asp:TextBox ID="txtStartDate" runat="server" TextMode="Date"></asp:TextBox>
            <label>结束日期:</label>
            <asp:TextBox ID="txtEndDate" runat="server" TextMode="Date"></asp:TextBox>
            <asp:Button ID="btnFilter" runat="server" Text="筛选" OnClick="btnFilter_Click" CssClass="filter-btn" />
            <asp:Button ID="btnShowAll" runat="server" Text="显示全部" OnClick="btnShowAll_Click" CssClass="filter-btn" />
        </div>

        <!-- 健康数据表格 -->
        <asp:GridView ID="gvHealthData" runat="server" AutoGenerateColumns="false" CssClass="custom-gridview">
            <Columns>
                <asp:BoundField DataField="dataid" HeaderText="数据ID" />
                <asp:BoundField DataField="old_id" HeaderText="老人ID" />
                <asp:BoundField DataField="心率" HeaderText="心率" />
                <asp:BoundField DataField="收缩压" HeaderText="收缩压" />
                <asp:BoundField DataField="舒张压" HeaderText="舒张压" />
                <asp:BoundField DataField="血氧浓度" HeaderText="血氧浓度" />
                <asp:BoundField DataField="体温" HeaderText="体温" />
                <asp:BoundField DataField="数据采集时间" HeaderText="数据采集时间" DataFormatString="{0:yyyy-MM-dd HH:mm:ss}" />
            </Columns>
        </asp:GridView>
    </div>
  <div class="button-container">
    <asp:Button ID="btnExportExcel" runat="server" Text="导出为Excel" OnClick="btnExportExcel_Click" CssClass="button-styled" />
    <asp:Button ID="btnExportPDF" runat="server" Text="导出为PDF" OnClick="btnExportPDF_Click" CssClass="button-styled" />
</div>


</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
   <div id="chartContainer" style="margin-top: 20px;">
    <h3 style="text-align: center; color: #5a3e85;">健康数据趋势分析</h3>
  <canvas id="healthChart" style="width: 100%; height: 660px; max-width: 1200px; max-height: 660px; margin: auto;"></canvas>
     <asp:Button ID="btnExportChart" runat="server" Text="导出图表" CssClass="button-styled" ClientIDMode="Static" />




</div>
    <script>
        document.getElementById("btnExportChart").addEventListener("click", function () {
            const canvas = document.getElementById("healthChart");
            const link = document.createElement("a");
            link.href = canvas.toDataURL("image/png");
            link.download = "HealthChart.png";
            link.click();
        });

    </script>
    <script>
        // 将 Chart.js 图表保存为图片并上传到服务器
        function saveChartAsImage() {
            const canvas = document.getElementById("healthChart");
            const dataURL = canvas.toDataURL("image/png");
            const blob = dataURItoBlob(dataURL);

            const formData = new FormData();
            formData.append("chartImage", blob, "chart.png");

            fetch("SaveChartImageHandler.ashx", {
                method: "POST",
                body: formData
            })
                .then(response => response.text())
                .then(result => {
                    console.log("图表保存成功:", result);
                })
                .catch(error => {
                    console.error("图表保存失败:", error);
                });
        }

        // 数据 URI 转 Blob
        function dataURItoBlob(dataURI) {
            const byteString = atob(dataURI.split(",")[1]);
            const mimeString = dataURI.split(",")[0].split(":")[1].split(";")[0];
            const buffer = new ArrayBuffer(byteString.length);
            const data = new Uint8Array(buffer);

            for (let i = 0; i < byteString.length; i++) {
                data[i] = byteString.charCodeAt(i);
            }

            return new Blob([buffer], { type: mimeString });
        }
    </script>


<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.1"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0"></script>

<script>
    // 全局声明变量
    let healthChart = null;

    // 定义更新图表的全局函数
    window.updateHealthChart = function (newData) {
        console.log("更新图表数据:", newData);
        renderHealthChart(newData);
    };

    // 渲染图表函数
    function renderHealthChart(data) {
        console.log("正在渲染图表:", data);

        // 数据预处理
        const labels = data.map(item => item.数据采集时间); // 时间标签
        const heartRate = data.map(item => parseInt(item.心率)); // 心率
        const systolic = data.map(item => parseInt(item.收缩压)); // 收缩压
        const diastolic = data.map(item => parseInt(item.舒张压)); // 舒张压

        // 如果图表已存在，则销毁
        if (healthChart) {
            healthChart.destroy();
        }

        // 初始化图表
        const ctx = document.getElementById('healthChart').getContext('2d');

        healthChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [
                    {
                        label: '心率 (bpm)',
                        data: heartRate,
                        borderColor: '#FF6384',
                        backgroundColor: 'rgba(255, 99, 132, 0.2)',
                        borderWidth: 2,
                        pointBackgroundColor: '#FF6384',
                        pointRadius: 5,
                        pointHoverRadius: 7,
                        tension: 0.3, // 曲线平滑度
                    },
                    {
                        label: '收缩压 (mmHg)',
                        data: systolic,
                        borderColor: '#36A2EB',
                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
                        borderWidth: 2,
                        pointBackgroundColor: '#36A2EB',
                        pointRadius: 5,
                        pointHoverRadius: 7,
                        tension: 0.3,
                    },
                    {
                        label: '舒张压 (mmHg)',
                        data: diastolic,
                        borderColor: '#FF9F40',
                        backgroundColor: 'rgba(255, 159, 64, 0.2)',
                        borderWidth: 2,
                        pointBackgroundColor: '#FF9F40',
                        pointRadius: 5,
                        pointHoverRadius: 7,
                        tension: 0.3,
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true, // 保持宽高比
                layout: {
                    padding: {
                        top: 10,
                        left: 10,
                        right: 10,
                        bottom: 10,
                    }
                },
                plugins: {
                    legend: {
                        position: 'top',
                        labels: {
                            font: {
                                size: 14,
                                weight: 'bold'
                            },
                            color: '#333' // 图例颜色
                        }
                    },
                    tooltip: {
                        backgroundColor: 'rgba(0, 0, 0, 0.8)',
                        titleFont: {
                            size: 14,
                            weight: 'bold'
                        },
                        bodyFont: {
                            size: 12
                        },
                        padding: 12,
                        cornerRadius: 6,
                        borderColor: 'rgba(255, 255, 255, 0.2)',
                        borderWidth: 1,
                    }
                },
                scales: {
                    x: {
                        type: 'time',
                        time: {
                            unit: 'day',
                            tooltipFormat: 'YYYY-MM-DD HH:mm:ss'
                        },
                        title: {
                            display: true,
                            text: '时间',
                            font: {
                                size: 14,
                                weight: 'bold'
                            },
                            color: '#666'
                        },
                        grid: {
                            color: 'rgba(200, 200, 200, 0.3)',
                        },
                        ticks: {
                            font: {
                                size: 12
                            },
                            color: '#555'
                        }
                    },
                    y: {
                        beginAtZero: false,
                        title: {
                            display: true,
                            text: '值',
                            font: {
                                size: 14,
                                weight: 'bold'
                            },
                            color: '#666'
                        },
                        grid: {
                            color: 'rgba(200, 200, 200, 0.3)'
                        },
                        ticks: {
                            font: {
                                size: 12
                            },
                            color: '#555'
                        }
                    }
                },
                interaction: {
                    intersect: false,
                    mode: 'index'
                }
            }
        });
    }
</script>






</asp:Content>

